import React from "react";
import { Input, Icon } from "antd";
import styles from "./MinusInputAdd.less";

// note： React.forwardRef 是为了移除warning
// function MinusInputAdd(props) {
const MinusInputAdd = React.forwardRef((props, ref) => {
  const { value, onChange, min = 1, max = 10 } = props;
  const minusFlag = value > min;
  const maxFlag = value < max;
  return (
    <div className={styles.root}>
      <div
        className={`${styles.minus}
          ${minusFlag ? "" : styles.disabled}`}
        onClick={
          minusFlag
            ? () => {
                if (value && minusFlag) {
                  onChange(value - 1);
                }
              }
            : () => {}
        }
      >
        <Icon type="minus" />
      </div>
      <Input
        ref={ref}
        value={value}
        className={styles.input}
        onChange={e => {
          const curValue = Number(e.target.value);
          if (curValue <= max && curValue >= min && !Number.isNaN(curValue)) {
            // 仅支持正整数
            onChange(Math.ceil(curValue));
          } else if (!e.target.value) {
            onChange(undefined);
          }
        }}
      />
      <div
        className={`${styles.plus}
        ${maxFlag ? "" : styles.disabled}`}
        onClick={
          maxFlag
            ? () => {
                if (value && maxFlag) {
                  onChange(value + 1);
                } else {
                  onChange(min);
                }
              }
            : () => {}
        }
      >
        <Icon type="plus" />
      </div>
    </div>
  );
});
// }

export default MinusInputAdd;
